<meta charset="utf-8">
<title>货币</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="网站描述">
<meta name="keywords" content="">
<meta name="author" content="wangl">
<link rel="icon" href="http://ow9lg82yy.bkt.clouddn.com/24f5c360-485d-4a6d-9468-2a61c353cf37.ico">
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all">
<link rel="stylesheet" href="/static/css/user.css" media="all">
<link rel="stylesheet" href="/static/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

</head>
<body>
<br><br>
<form id="form" class="layui-form" action="" method="get" style="width:80%;">
    <input id="feeId" name="id" type="hidden" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">交易货币</label>
        <div class="layui-input-block">
            <select id="coinTypeSelect" lay-filter="test">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">当前单价</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="singlePrice" name="singlePrice">
        </div>
    </div>
</form>

<div id="main" style="width: 100%;height: 400px;"></div>


</body>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/tools.js"></script>
<script type="text/javascript" src="/static/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/static/js/CodeConst.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="/static/js/dealParam.js"></script>
<script>
    layui.use('form', function () {
        var form = layui.form;
        //刷新select选择框渲染
        var coinTypeList = getCoinTypeList();
        var coinTypeOptionList = '';
        var coinTypeId = null;
        $.each(coinTypeList, function (index, coinType) {
            coinTypeOptionList += '<option value="' + coinType.id + '">' + coinType.name + '</option>';
            if (index == 0) {
                coinTypeId = coinType.id;
                getData(coinTypeId);
            }
        });
        $("#coinTypeSelect").html(coinTypeOptionList);
        form.render('select');

        form.on('select(test)', function (data) {
            console.log(data);
            getData(data.value);
        });

        function getData(id) {
            $.ajax({
                async: false,
                url: '/back/survey/price/price',
                type: 'GET',
                success: function (baseDto) {
                    singlePrice = baseDto.data;
                    var singlePriceDiv = $("#singlePrice");
                    singlePriceDiv.val(singlePrice);
                }
            });

            var coinTypeSelect = $("#coinTypeSelect");
            coinTypeSelect.append($(coinTypeOptionList));
            var myChart = echarts.init(document.getElementById('main'));
            var xData = [], yData = [];


            $.ajax({
                url: '/back/survey/price/priceList',
                type: 'GET',
                dataType: 'json',
                data: {
                    coinTypeId: id
                },
                success: function (baseDto) {
                    console.log(baseDto);
                    for (var i = 0, len = baseDto.data.length; i < len; i++) {
                        yData.push(baseDto.data[i].openPrice);
                        xData.push(baseDto.data[i].createDate);
                    }
                    console.log(xData);
                    console.log(yData);
                },
                complete: function () {
                    option = {
                        title: {
                            text: "历史价格折线图",
                            x:'center',
                            y:'top',
                            textAlign:'center'
                        },
                        xAxis: {
                            name: '时间',
                            type: 'category',
                            data: xData
                        },
                        yAxis: {
                            name: '公价',
                            type: 'value'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        series: [{
                            name:'公价',
                            data: yData,
                            type: 'line',
                            barWidth: 50
                        }]
                    };
                    myChart.setOption(option);
                }
            });
        }
    });
</script>

